<template>
  <div>
    <el-col>
      <el-col :span="5" style="text-align:left">
        <div class="grid-content" style="margin:0px 0px 30px">
          <div class="demo-image" >
            <div class="block" >
              <el-image style="width: 61px; height: 61px" :src="url" :fit="fits"></el-image>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            @select="handleSelect"
          >
            <template v-for="(item,index) in itemParents">
                <el-menu-item v-if="!item.children" :index="item.id" :key="index">{{item.title}}</el-menu-item>
                <el-submenu v-else :key="index" :index="item.id">
                    <template slot="title">{{item.title}}</template>
                    <el-menu-item v-for="(item,index) in item.children" :key="index" :index="item.id">{{item.title}}</el-menu-item>
                </el-submenu>
            </template>
           
          </el-menu>
          <div class="line"></div>
          
        </div>
      </el-col>
    </el-col>
  </div>
</template>
<script>
export default {
  name: "head",
  data() {
    return {
      fits: "fill",
      url: require("@/assets/logo.png"),
       activeIndex: '1001',
        itemParents:[
            {id:"1001",title:"首页"},
            {id:"1002",title:"客户管理",children:[
                {id:"1021",title:"客户添加"},
                {id:"1022",title:"客户投诉"},
                {id:"1023",title:"客户关怀"},
                {id:"1024",title:"客户回访"},
            ]},
            {id:"1003",title:"联系人管理"},
            {id:"1004",title:"收款单管理"},
            {id:"1005",title:"合同管理"},
            {id:"1006",title:"供应商管理"},
        ]
    };
  },
  methods:{
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
  }

};
</script>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  /* border: 1px solid red */
}
.el-col:first-child{
    margin: 0px 0px 30px
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>